<template>
  <div class="carouselImg">
    <div
      id="carouselExampleIndicators"
      class="carousel slide"
      data-ride="carousel"
    >
      <!-- <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../../../assets/img/carousel/tu-1.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="../../../assets/img/carousel/tu-2.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="../../../assets/img/carousel/tu-3.png" class="d-block w-100" alt="...">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>  -->
      <el-carousel :interval="4000" type="card" width="1000" height="600px">
        <el-carousel-item v-for="(item, index) in lb" :key="index">
          <img :src="item.carouselUrl" width="900" height="650" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
// export default {
//   name: "carouselImg",
// };
export default {
  name: "carouselImg",
  data() {
    return {
      lb: [],
    };
  },
  created() {
    this.xs();
  },
  methods: {
    xs() {
      this.$axios
        .get("https://localhost:44358/api/app/carousels/buttom-lists")
        .then((a) => {
          this.lb = a.data;
          console.log(this.lb);
        });
    },
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>